<template>
  <div class="needs-item_top dislay-flex">
    <div class="needs-item_top_left">
      <img :src="userQurl" />
    </div>
    <div class="needs-item_top_right">
      <div class="needs-xm">
        <span class="right">{{ usernaema }}</span>
      </div>
      <div class="needs-address dislay-flex">
        <span class="needs-area">{{ address }}</span
        ><span class="needs-time area">{{ time }}</span>
      </div>
    </div>
    <div class="needs-item_top_cate">
      <span class="needs-cate" style="color: #03b2ee">{{ catename }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ToutiaoNeedsuser",
  props: ["needsAddress", "nowaddTime", "cateId", "userId"],
  components: {},

  directives: {},

  data() {
    return {
      address: this.needsAddress,
      time: this.nowaddTime,
      cateid: this.cateId,
      userid: this.userId,
      catename: "",
      userQurl: "",
      usernaema: "",
    };
  },

  mounted() {},
  created() {
    this.cateneeds(this.cateid);
    this.getUsername(this.userid);
  },
  methods: {
    cateneeds(cateId) {
      let that = this;
      $.ajax({
        type: "get",
        url: `http://121.4.40.144/api/cate/${cateId}`,
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          that.catename = res.data.cateName;
        },
      });
    },

    getUsername(userId) {
      let that = this;
      $.ajax({
        type: "get",
        url: `http://121.4.40.144/api/user/${userId}`,
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          let qq = res.data.email.split("@")[0];
          that.userQurl = `https://thirdqq.qlogo.cn/g?b=qq&nk=${qq}&s=100`;
          that.usernaema = res.data.userName;
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.needs-item_top_right {
  flex: 1;
  padding-left: 10px;
}
.needs-item_top_cate {
  padding-top: 10px;
}
.needs-item_top_left img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.needs-item_top_right .needs-xm {
  padding: 3px 0 8px 0;
  font-weight: 600;
  font-size: 15px;
  color: black;
}
.needs-item_top_right .needs-address {
  color: #959595;
  font-size: 0.8em;
}
.needs-item_top_right .needs-address .needs-area {
  padding-right: 8px;
  font-size: 0.9em;
  border-right: 1px solid #9a9a9a;
}
.needs-item_top_right .needs-address .needs-time.area {
  padding-left: 8px;
  line-height: 16px;
}
.needs-item .needs-item_top .needs-item_top_cate .needs-cate {
  color: #53d869;
  font-size: 0.8em;
}
</style>